﻿<!DOCTYPE html>
<html lang="zh">
<!--统计代码-->
<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?3547f61a8a59aa1782abebe1281a1195";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>

<head>
  <meta charset="UTF-8" />
  <title>
    珠海圈宝科技首页-人工智能识别团队,定制企业高效解决方案「最新算法技术」
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta name="keywords"
    content="视觉人工智能,识别定制开发解决方案,人形识别,行为识别,动作识别,表情识别,人脸识别,物体识别,牛脸识别,全球证件识别,烟火识别,中医穴位识别,筹码盘识别,停车场照明节能控制,智能楼宇协议" />
  <meta name="description" content="圈宝是以人工智能技术为核心,先进的算法构建完善的视觉人工智能技术体系,为企业提供技术服务及降低成本且高效的解决方案优秀团队" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Cache" content="no-cache" />

  <link rel="icon" href="source/image/logo.png" type="image/x-icon" />

  <!--默认样式-->
  <link rel="stylesheet" href="source/css/reset.css" />

  <!--css3动画库-->
  <!-- <link rel="stylesheet" href="source/css/animate.css" /> -->

  <!--banner大图基础样式-->
  <link rel="stylesheet" href="source/css/slick.css" />

  <!--页面滚动基础样式-->
  <link rel="stylesheet" href="source/css/jquery.fullPage.css" />

  <!--导航样式-->
  <link rel="stylesheet" href="source/css/head.css" />

  <!--图片和滚屏样式-->
  <link rel="stylesheet" href="source/css/index.css" />

  <!--小刘样式-->
  <link rel="stylesheet" href="source/css/common.css" />
  <link rel="stylesheet" href="source/css/my.css" />

  <!--动画样式-->
  <link rel="stylesheet" href="source/css/animate.min.css" />
</head>

<body>
  <!-- 导航 -->
  <header id="header" class="header">
    <ul class="nav">
      <li class="nav-item">
        <a for="n1" class="nav-link" onclick="jump(1)" i18n="i18n.Home">首页</a>
      </li>
      <li class="nav-item">
        <a for="n2" class="nav-link" onclick="jump(2)" i18n="i18n.AboutUs">公司简介</a>
      </li>
      <li class="nav-item">
        <a for="n4" class="nav-link" onclick="jump(3)" i18n="i18n.Products">AI解决方案</a>
      </li>
      <li class="nav-item">
        <a for="n3" class="nav-link" onclick="jump(4)" i18n="i18n.Patent">证书</a>
      </li>
      <li class="nav-item">
        <a for="n5" class="nav-link" onclick="jump(6)" i18n="i18n.News">公司资讯</a>
      </li>
      <li class="nav-item">
        <a for="n6" class="nav-link" onclick="jump(7)" i18n="i18n.ContactUs">联系我们</a>
      </li>
      <!-- <li class="nav-item">
        <a for="n7" class="nav-link" onclick="window.open('others.html')" i18n="i18n.Job">招聘信息</a>
      </li> -->
    </ul>
    <div id="lang" class="language" onclick="switchLanguage()">
      <span>中文</span>
      <img src="source/image/a_switch.png" />
    </div>
  </header>
  <!-- 内容 -->
  <div id="index_main" class="index_main" style="filter: blur(10px) brightness(0.3)">
    <div id="s1" class="section section1">
      <div id="myFace" class="items" style="
            background-image: url(https://quanbao-public.oss-cn-shenzhen.aliyuncs.com/GuanWang/pc/a_bg.png);
            background-size: 100% 100%;
          "></div>
      <div id="myLine" class="k_line" style="
            z-index: 2;
            background-image: url(source/image/a_line.png);
            background-size: 100% 100%;
          "></div>
      <div class="sky"></div>
      <div class="s1_location">
        <img id="ani1-1" style="opacity: 0" src="source/image/a_title.png" alt="圈宝网络" />
        <div id="ani1-2" style="opacity: 0">
          <span i18n="i18n.Core1">未来科技核心</span>
          <span style="font-weight: 900; color: #fff; margin: 0 10px">|</span>
          <span i18n="i18n.Core2">人工智能</span>
        </div>
        <div id="ani1-3" style="font-size: 0.7rem; margin-top: 20px; opacity: 0">
          <p i18n="i18n.Dedicated">致力人工智能软件开发——圈宝网络</p>
          <p i18n="i18n.Filling">让世界充满惊喜</p>
        </div>
      </div>
      <div class="number" style="border-bottom: none">
        <div class="page2"></div>
        <div class="inner clearfix">
          <img src="source/image/a_logo.png" alt="圈宝网络" />
        </div>
      </div>
    </div>
    <div id="s2" class="section section2">
      <div id="ani2-1" class="page2">
        <div style="flex: 8">
          <img class="imgBg1" src="source/image/default.png" data-src="source/image/b_bg1.png" alt="圈宝网络" />
        </div>
        <!-- <div style="flex: 164"> -->
        <div style="flex: 164">
          <!-- <img class="imgPhoto" src="source/image/default.png" data-src="source/image/b_photo.png"
            alt="圈宝网络" /> -->
          <video class="imgPhoto" src="source/video/圈宝2020宣传手机.mp4" id="ani2-2" controls="controls"></video>
        </div>
        <div class="p2_box" style="flex: 130">
          <div id="ani2-3">
            <div style="display: flex; flex-wrap: wrap">
              <span style="text-align: left; font-weight: bold; font-size: 1.4rem" i18n="i18n.AboutUs">公司简介</span>
              <span style="
                    color: #000;
                    font-size: 0.68rem;
                    line-height: 1.9em;
                    display: block;
                    margin-top: 0.5em;
                  " i18n="i18n.Zhuhai">
                珠海市圈宝网络科技有限公司是由海归博士带头的创业团队组建，
                是AI领域国内一流公司，它致力于AI技术在中国的创新应用，拥有多项国家发明专利，公司秉承着“让世界充满惊喜”的理念，
                不断给人们带来科技创新的美妙体验！
              </span>
            </div>
            <!--<span style="color: #000;font-size: 13px;line-height: 1.9em">-->
            <!--圈宝网络同时关注微信小程序开发、小程序代理加盟外，服务业-->
            <!--务还包括：小程序源代码出售、app开发、百度等搜索引擎关键-->
            <!--词优化、关键词快速上首页、网站建设等。公司以自主研发为立-->
            <!--足点，助力企业管理信息化、营销精准化。为企业提供一站式移-->
            <!--解决方案，轻松助力企业解决移动互联时代全渠道获客、引流、-->
            <!--交易、二次营销。-->
            <!--</span>-->
            <div style="display: flex; flex-direction: column; margin-top: 2.4em">
              <div class="s2-int">
                <img id="move2-1" src="source/image/default.png" data-src="source/image/team.png" />
                <div>
                  <span i18n="i18n.Professional">专业强大的技术团队</span>
                  <span i18n="i18n.Founded">由海归博士带头组件的AI领域国内一流的公司，拥有多项国家发明专利。</span>
                </div>
              </div>
              <div class="s2-int">
                <img id="move2-2" src="source/image/default.png" data-src="source/image/exp.png" />
                <div>
                  <span i18n="i18n.Comprehensive">全方位后续支持与维护</span>
                  <span i18n="i18n.Supported">强大的客户服务和技术团队，贴心地为你解决后顾之忧。</span>
                </div>
              </div>
              <div class="s2-int">
                <img id="move2-3" src="source/image/default.png" data-src="source/image/fix.png" />
                <div>
                  <span i18n="i18n.Experienced">丰富的项目经验</span>
                  <span i18n="i18n.With">拥有超过15年的软件项目与软件产品研发经验，专注于AI定制、AI相关产品研发。</span>
                </div>
              </div>
              <!--<div style="padding: 8px 24px;background: #21A796;color: #fff;font-size: 15px;margin-right: 25px"-->
              <!--i18n="i18n.Company">-->
              <!--公司使命-->
              <!--</div>-->
              <!--<span i18n="i18n.Integrating">让地球的人们生活在“AI”中</span>-->
            </div>
          </div>
          <div></div>
          <img src="source/image/default.png" data-src="source/image/b_bg2.png" alt="圈宝网络" />
        </div>
      </div>
      <div class="number" style="border-bottom: none">
        <div class="inner clearfix">
          <img src="source/image/default.png" data-src="source/image/b_logo.png" alt="圈宝网络" />
        </div>
      </div>
    </div>
    <div id="s3" class="section section3">
      <div class="page2 p2-4">
        <div class="p4-header">
          AI解决方案
          <!-- <div class="p4-nav">
                  <input type="radio" name="ai" value="1" id="ai1" checked/>
                  <label for="ai1">通用解决方案</label>
                  <input type="radio" name="ai" value="2" id="ai2"/>
                  <label for="ai2">行业解决方案</label>
                  <input type="radio" name="ai" value="3" id="ai3"/>
                  <label for="ai3">其他解决方案</label>
              </div> -->
        </div>
        <div class="p4-content">
          <div class="p4-big">
            <div class="p41" onclick="toSolution(0)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_01.png">
              <span i18n="i18n.ai1">钢轨探伤智能系统</span>
            </div>
            <div class="p42" onclick="toSolution(9)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_10.png">
              <span i18n="i18n.ai10">筹码盘识别</span>
            </div>
          </div>
          <div class="p4-small">
            <div class="p41" onclick="toSolution(1)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_02.png">
              <span i18n="i18n.ai2">AI智慧校园解决方案</span>
            </div>
            <div class="p41" onclick="toSolution(2)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_03.png">
              <span i18n="i18n.ai3">全球证件识别</span>
            </div>
            <div class="p41" onclick="toSolution(3)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_04.png">
              <span i18n="i18n.ai4">穴位识别</span>
            </div>
            <div class="p41" onclick="toSolution(4)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_05.png">
              <span i18n="i18n.ai5">人脸识别</span>
            </div>
            <div class="p41" onclick="toSolution(5)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_06.png">
              <span i18n="i18n.ai6">人形识别</span>
            </div>
            <div class="p41" onclick="toSolution(6)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_07.png">
              <span i18n="i18n.ai7">行为识别</span>
            </div>
            <div class="p41" onclick="toSolution(7)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_08.png">
              <span i18n="i18n.ai8">表情识别</span>
            </div>
            <div class="p41" onclick="toSolution(8)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_09.png">
              <span i18n="i18n.ai9">物体识别</span>
            </div>
            <div class="p42" onclick="toSolution(10)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_11.png">
              <span i18n="i18n.ai11">内窥镜智能影像识别</span>
            </div>
            <div class="p42" onclick="toSolution(11)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_12.png">
              <span i18n="i18n.ai12">停车场车辆违停识别</span>
            </div>
            <div class="p42" onclick="toSolution(12)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_13.png">
              <span i18n="i18n.ai13">高空抛物识别</span>
            </div>
            <div class="p42" onclick="toSolution(13)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_14.png">
              <span i18n="i18n.ai14">智能烟火识别警报</span>
            </div>
            <div class="p42" onclick="toSolution(14)">
              <img src="source/image/default.png" data-src="source/ai/ai_pic_15.png">
              <span i18n="i18n.ai15">智能边界入侵识别</span>
            </div>
          </div>
        </div>
        <div class="p4-page">
          <!--<div class="p4-last"><</div>-->
          <div class="p4-index" onclick="selectPage(0)">1</div>
          <div class="p4-index" onclick="selectPage(1)">2</div>
          <!--<div class="p4-next">></div>-->
        </div>
      </div>
      <div class="number" style="border-bottom: none">
        <div class="inner clearfix">
          <img src="source/image/default.png" data-src="source/image/b_logo.png" alt="圈宝网络">
        </div>
      </div>
    </div>
    <div id="s4" class="section section4">
      <div class="page3"></div>
      <div id="iback" class="page2 p2-3">
        <div class="p3-box">
          <span class="p3-title" i18n="i18n.Patent3">知识产权证书</span>
          <div class="p3-content" i18n="i18n.Patent2">
            以AI为核心自主研发，公司目前已拥有知识产权及多项专利技术，并已应用在各行各业。目标，将引领在未来的生产业、建筑、工程、医学，安防、新零售等技行业。
          </div>
          <div class="p3-list normal-scroll">
            <input id="art36" type="radio" name="credit" value="c36" />
            <label class="p3-item" for="art36">
              <img src="source/image/zs_1.png" checked />
              <span>训练肺部内窥镜图像识别模型的方法及识别方法</span>
              <span class="tip">训练肺部内窥镜图像识别模型的方法及识别方法</span>
            </label>
            <input id="art35" type="radio" name="credit" value="c35" />
            <label class="p3-item" for="art35">
              <img src="source/image/zs_1.png" checked />
              <span>混合钢轨超声波B显图谱伤损识别方法、系统和存储介质</span>
              <span class="tip">混合钢轨超声波B显图谱伤损识别方法、系统和存储介质</span>
            </label>
            <input id="art34" type="radio" name="credit" value="c34" />
            <label class="p3-item" for="art34">
              <img src="source/image/zs_1.png" checked />
              <span>一种从图片快速生成动态PDF文件的方法</span>
              <span class="tip">一种从图片快速生成动态PDF文件的方法</span>
            </label>
            <input id="art33" type="radio" name="credit" value="c33" />
            <label class="p3-item" for="art33">
              <img src="source/image/zs_1.png" checked />
              <span>圈宝AI探伤大数据分析系统</span>
              <span class="tip">圈宝AI探伤大数据分析系统</span>
            </label>
            <input id="art32" type="radio" name="credit" value="c32" />
            <label class="p3-item" for="art32">
              <img src="source/image/zs_1.png" checked />
              <span>钢轨探伤智能图像采集系统</span>
              <span class="tip">钢轨探伤智能图像采集系统</span>
            </label>
            <input id="art31" type="radio" name="credit" value="c31" />
            <label class="p3-item" for="art31">
              <img src="source/image/zs_1.png" checked />
              <span>Qbaor Automatic Info Filler</span>
              <span class="tip">Qbaor Automatic Info Filler</span>
            </label>
            <input id="art30" type="radio" name="credit" value="c30" />
            <label class="p3-item" for="art30">
              <img src="source/image/zs_1.png" checked />
              <span>VIP CHECKIN酒店入住登记系统</span>
              <span class="tip">VIP CHECKIN酒店入住登记系统</span>
            </label>
            <input id="art29" type="radio" name="credit" value="c29" />
            <label class="p3-item" for="art29">
              <img src="source/image/zs_1.png" checked />
              <span>VIP Area访客管理前台系统V1.0.0</span>
              <span class="tip">VIP Area访客管理前台系统V1.0.0</span>
            </label>
            <input id="art28" type="radio" name="credit" value="c28" />
            <label class="p3-item" for="art28">
              <img src="source/image/zs_1.png" checked />
              <span>圈宝 ScriptWriter 脚本编辑软件</span>
              <span class="tip">圈宝 ScriptWriter 脚本编辑软件</span>
            </label>
            <input id="art27" type="radio" name="credit" value="c27" />
            <label class="p3-item" for="art27">
              <img src="source/image/zs_1.png" checked />
              <span>圈宝AI智慧警车巡防大数据系统</span>
              <span class="tip">圈宝AI智慧警车巡防大数据系统</span>
            </label>
            <input id="art26" type="radio" name="credit" value="c26" />
            <label class="p3-item" for="art26">
              <img src="source/image/zs_1.png" checked />
              <span>圈宝辅助录屏软件</span>
              <span class="tip">圈宝辅助录屏软件</span>
            </label>
            <input id="art25" type="radio" name="credit" value="c25" />
            <label class="p3-item" for="art25">
              <img src="source/image/zs_1.png" checked />
              <span>智慧校园管理系统</span>
              <span class="tip">智慧校园管理系统</span>
            </label>
            <input id="art24" type="radio" name="credit" value="c24" />
            <label class="p3-item" for="art24">
              <img src="source/image/zs_1.png" checked />
              <span>圈宝智能人形识别系统</span>
              <span class="tip">圈宝智能人形识别系统</span>
            </label>
            <input id="art23" type="radio" name="credit" value="c23" />
            <label class="p3-item" for="art23">
              <img src="source/image/zs_1.png" checked />
              <span>警务秘书管理系统</span>
              <span class="tip">警务秘书管理系统</span>
            </label>
            <input id="art22" type="radio" name="credit" value="c22" />
            <label class="p3-item" for="art22">
              <img src="source/image/zs_1.png" checked />
              <span>MMA管理系统</span>
              <span class="tip">MMA管理系统</span>
            </label>
            <input id="art21" type="radio" name="credit" value="c21" />
            <label class="p3-item" for="art21">
              <img src="source/image/zs_1.png" checked />
              <span>MRA管理系统</span>
              <span class="tip">MRA管理系统</span>
            </label>
            <input id="art20" type="radio" name="credit" value="c20" />
            <label class="p3-item" for="art20">
              <img src="source/image/zs_1.png" checked />
              <span>圈宝LMIS管理系统</span>
              <span class="tip">圈宝LMIS管理系统</span>
            </label>
            <input id="art19" type="radio" name="credit" value="c19" />
            <label class="p3-item" for="art19">
              <img src="source/image/zs_1.png" checked />
              <span>QB-PTT管理系统</span>
              <span class="tip">QB-PTT管理系统</span>
            </label>
            <input id="art18" type="radio" name="credit" value="c18" />
            <label class="p3-item" for="art18">
              <img src="source/image/zs_1.png" checked />
              <span>寻宝天下管理系统</span>
              <span class="tip">寻宝天下管理系统</span>
            </label>
            <input id="art17" type="radio" name="credit" value="c17" />
            <label class="p3-item" for="art17">
              <img src="source/image/zs_1.png" checked />
              <span>智慧校园管理系统V1.0.1</span>
              <span class="tip">智慧校园管理系统V1.0.1</span>
            </label>
            <input id="art16" type="radio" name="credit" value="c16" />
            <label class="p3-item" for="art16">
              <img src="source/image/zs_1.png" />
              <span>圈宝智能人形识别系统V2.0.0</span>
              <span class="tip">圈宝智能人形识别系统V2.0.0</span>
            </label>
            <input id="art14" type="radio" name="credit" value="c14" />
            <label class="p3-item" for="art14">
              <img src="source/image/zs_1.png" />
              <span>警务秘书APP</span>
              <span class="tip">警务秘书APP</span>
            </label>
            <input id="art15" type="radio" name="credit" value="c15" />
            <label class="p3-item" for="art15">
              <img src="source/image/zs_1.png" />
              <span>警务秘书管理系统</span>
              <span class="tip">警务秘书管理系统</span>
            </label>
            <input id="art3" type="radio" name="credit" value="c3" />
            <label class="p3-item" for="art3">
              <img src="source/image/zs_1.png" />
              <span>Mobile Registration Assistant software (for Android)</span>
              <span class="tip">Mobile Registration Assistant software (for Android)</span>
            </label>
            <input id="art1" type="radio" name="credit" value="c1" />
            <label class="p3-item" for="art1">
              <img src="source/image/zs_1.png" />
              <span>Marketing Mobile Assistant software (for Android)</span>
              <span class="tip">Marketing Mobile Assistant software (for Android)</span>
            </label>
            <input id="art2" type="radio" name="credit" value="c2" />
            <label class="p3-item" for="art2">
              <img src="source/image/zs_1.png" />
              <span>Marketing Mobile Assistant 管理系统</span>
              <span class="tip">Marketing Mobile Assistant 管理系统</span>
            </label>
            <input id="art5" type="radio" name="credit" value="c5" />
            <label class="p3-item" for="art5">
              <img src="source/image/zs_1.png" />
              <span>QB Push To Talk software (for Android)</span>
              <span class="tip">QB Push To Talk software (for Android)</span>
            </label>
            <input id="art6" type="radio" name="credit" value="c6" />
            <label class="p3-item" for="art6">
              <img src="source/image/zs_1.png" />
              <span>QB-Push To Talk 管理系统</span>
              <span class="tip">QB-Push To Talk 管理系统</span>
            </label>
            <input id="art4" type="radio" name="credit" value="c4" />
            <label class="p3-item" for="art4">
              <img src="source/image/zs_1.png" />
              <span>Mobile Registration Assistant 管理系统</span>
              <span class="tip">Mobile Registration Assistant 管理系统</span>
            </label>
            <input id="art11" type="radio" name="credit" value="c11" />
            <label class="p3-item" for="art11">
              <img src="source/image/zs_1.png" />
              <span>寻宝天下商户平台（小程序版）</span>
              <span class="tip">寻宝天下商户平台（小程序版）</span>
            </label>
            <input id="art10" type="radio" name="credit" value="c10" />
            <label class="p3-item" for="art10">
              <img src="source/image/zs_1.png" />
              <span>寻宝天下管理系统</span>
              <span class="tip">寻宝天下管理系统</span>
            </label>
            <input id="art8" type="radio" name="credit" value="c8" />
            <label class="p3-item" for="art8">
              <img src="source/image/zs_1.png" />
              <span>寻宝天下APP（IOS版）</span>
              <span class="tip">寻宝天下APP（IOS版）</span>
            </label>
            <input id="art9" type="radio" name="credit" value="c9" />
            <label class="p3-item" for="art9">
              <img src="source/image/zs_1.png" />
              <span>寻宝天下APP（Android版）</span>
              <span class="tip">寻宝天下APP（Android版）</span>
            </label>
            <input id="art7" type="radio" name="credit" value="c7" />
            <label class="p3-item" for="art7">
              <img src="source/image/zs_1.png" />
              <span>圈宝LMIS管理系统</span>
              <span class="tip">圈宝LMIS管理系统</span>
            </label>
            <input id="art12" type="radio" name="credit" value="c12" />
            <label class="p3-item" for="art12">
              <img src="source/image/zs_1.png" />
              <span i18n="i18n.C1">实景空中红包雨</span>
              <span class="tip" i18n="i18n.C1">实景空中红包雨</span>
            </label>
            <input id="art13" type="radio" name="credit" value="c13" />
            <label class="p3-item" for="art13">
              <img src="source/image/zs_1.png" />
              <span i18n="i18n.C2">图片快速生成动态PDF</span>
              <span class="tip" i18n="i18n.C2">图片快速生成动态PDF</span>
            </label>
          </div>
        </div>
        <img class="imgP3" src="source/image/default.png" data-src="source/image/fss.png" />
      </div>
      <div class="credit">
        <img class="imgCre" src="source/image/default.png"
          data-src="https://quanbao-public.oss-cn-shenzhen.aliyuncs.com/GuanWang/pc/bg_2.png" />
        <div id="move3-1" class="creditBox">
          <div class="imgCredit">
            <img id="imgCredit" src="source/image/default.png" data-src="source/image/c1.png" />
          </div>
        </div>
      </div>
      <div class="number" style="border-bottom: none">
        <div class="inner clearfix">
          <img src="source/image/default.png" data-src="source/image/b_logo.png" alt="圈宝网络" />
        </div>
      </div>
    </div>

    <div id="s5-A" class="section section5">
      <div id="s5-Aimg" style="width: 100vw; height: 100vh"></div>
      <div class="page5">
        <div class="page5-case" style="display: flex">
          <div class="p5-title1" i18n="i18n.Cases">合作案例</div>
          <div id="imgBox" class="imgBox">
            <img id="swi1" class="imgCase" src="source/image/default.png" data-src="source/image/ANLI-MRA.png"
              alt="MRA" />
            <img id="swi2" class="imgCase" src="source/image/default.png" data-src="source/image/ANLI-HBD.png"
              alt="HBD" />
            <img id="swi3" class="imgCase" src="source/image/default.png" data-src="source/image/ANLI-MRA.png"
              alt="MMA" />
            <img id="swi4" class="imgCase" src="source/image/default.png" data-src="source/image/ANLI-PTT.png"
              alt="PTT" />
            <img id="swi5" class="imgCase" src="source/image/default.png" data-src="source/image/ANLI-AICS.png"
              alt="AICS" />
            <img id="swi6" class="imgCase" src="source/image/default.png" data-src="source/image/ANLI-AR.png"
              alt="AR红包雨" />
            <img id="swi7" class="imgCase" src="source/image/default.png" data-src="source/image/ANLI-XunBao.png"
              alt="AR寻宝" />
            <img id="swi8" src="source/image/default.png" data-src="source/image/ANLI-PTT.png" alt="圈宝网络"
              style="opacity: 0; width: 100%" />
            <div id="switch" class="switchBox">
              <img class="switchGray" src="source/image/default.png" data-src="source/image/tab.png"
                onclick="setSwitch(0)" />
              <img class="switchGray switchHigh" src="source/image/default.png" data-src="source/image/tab.png"
                onclick="setSwitch(1)" />
            </div>
          </div>
          <!--案例介绍-->
          <div class="p5_content">
            <div id="p5Wrap" class="p5-wrap"></div>
          </div>
        </div>
        <div class="p5b-bottom">
          <div class="p5-title2" i18n="i18n.Partners">合作商家</div>
          <div class="p5b-float">
            <img id="imgP50" class="imgP5b" src="source/image/default.png" data-src="source/image/ANLI-MRA.png"
              onclick="setSelScroll(0)" />
            <img id="imgP51" class="imgP5b" src="source/image/default.png" data-src="source/image/ANLI-HBD.png"
              onclick="setSelScroll(1)" />
            <!-- <img id="imgP52" class="imgP5b" src="source/image/default.png" data-src="source/image/ANLI-MRA.png"
              onclick="setSelScroll(2)" /> -->
            <img id="imgP53" class="imgP5b" src="source/image/default.png" data-src="source/image/ANLI-PTT.png"
              onclick="setSelScroll(3)" />
            <img id="imgP54" class="imgP5b" src="source/image/default.png" data-src="source/image/ANLI-AICS.png"
              onclick="setSelScroll(4)" />
            <!-- <img id="imgP55" class="imgP5b" src="source/image/default.png" data-src="source/image/ANLI-AR.png"
              onclick="setSelScroll(5)" /> -->
            <img id="imgP56" class="imgP5b" src="source/image/default.png" data-src="source/image/ANLI-XunBao.png"
              onclick="setSelScroll(6)" />
          </div>
          <!--合作商家-->
          <div class="p5b_company">
            <img src="source/image/default.png" data-src="source/image/e_logo_1.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_2.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_3.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_4.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_5.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_6.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_7.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_8.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_9.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_10.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_11.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_12.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_13.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_14.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_15.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_16.png" />
            <img src="source/image/default.png" data-src="source/image/e_logo_17.png" />
          </div>
        </div>
      </div>
      <div class="number" style="border-bottom: none">
        <div class="inner clearfix">
          <img src="source/image/default.png" data-src="source/image/a_logo.png" />
        </div>
      </div>
    </div>
    <div id="s5-B" class="section section6">
      <div class="pageB">
        <div class="pb-title" i18n="i18n.News">公司资讯</div>
        <div class="pb-box">
          <div class="ani6-1" onclick="selArticle(6)">
            <span class="pb-name" i18n="i18n.MA70">喜讯丨热烈祝贺圈宝科技成为高新技术企业</span>
            <span class="pb-time">2021/12/22</span>
          </div>
          <div class="ani6-2" onclick="selArticle(5)">
            <span class="pb-name" i18n="i18n.MA60">热烈祝贺我司珠港澳人工智能算法大赛荣获优秀奖</span>
            <span class="pb-time">2020/12/15</span>
          </div>
          <div class="ani6-3" onclick="selArticle(4)">
            <span class="pb-name" i18n="i18n.MA50">AI人工智能，圈宝科技牵手万科物业打造智慧小区</span>
            <span class="pb-time">2020/06/12</span>
          </div>
          <div class="ani6-4" onclick="selArticle(0)">
            <span class="pb-name" i18n="i18n.MA10">让5G走进校园，助力AI智慧校园</span>
            <span class="pb-time">2019/09/18</span>
          </div>
          <div class="ani6-1" onclick="selArticle(1)">
            <span class="pb-name" i18n="i18n.MA20">QB-PTT智能语音对讲！手机也是对讲机！</span>
            <span class="pb-time">2019/09/18</span>
          </div>
          <div class="ani6-2" onclick="selArticle(2)">
            <span class="pb-name" i18n="i18n.MA30">企业新闻 |谷歌眼镜技术团队莅临圈宝科技交流沟通</span>
            <span class="pb-time">2019/08/26</span>
          </div>
          <div class="ani6-3" onclick="selArticle(3)">
            <span class="pb-name" i18n="i18n.MA40">5G+AR，在印刷领域大显身手</span>
            <span class="pb-time">2019/06/28</span>
          </div>
        </div>
      </div>
      <div id="pop" class="p5-pop">
        <!--文章-->
        <div class="pb-wrap normal-scroll">
          <div id="article" class="p5-center"></div>
        </div>
        <img src="source/image/e_close.png" onclick="closePop()" />
      </div>
      <div class="number" style="border-bottom: none">
        <div class="inner clearfix">
          <img src="source/image/default.png" data-src="source/image/b_logo.png" />
        </div>
      </div>
    </div>
    <div id="s6" class="section section7">
      <div class="page3" style="background: #080b0d"></div>
      <div class="page6" style="color: #fff">
        <div style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
            ">
          <div style="margin-bottom: 0.3em; font-size: 0.7rem">联系我们</div>
          <img src="source/image/default.png" data-src="source/image/Contactus.png"
            style="width: 8vw; height: calc(8vw * 31 / 156)" />
        </div>
        <div style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
            ">
          <div style="width: 1px; height: 2rem"></div>
          <div style="width: 10px; height: 1px; background: #fff"></div>
          <h5 class="spanWeixin" i18n="i18n.Official">官方微信公众号</h5>
          <img src="source/image/default.png" data-src="source/image/f_qr_code.png" style="width: 7vw; height: 7vw" />
          <div style="width: 1px; height: 2rem"></div>
          <div style="width: 10px; height: 1px; background: #fff"></div>
        </div>
        <div style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              text-align: left;
            ">
          <span style="font-size: 0.75rem" i18n="i18n.QuanBao">珠海市圈宝网络科技有限公司</span>
          <span style="font-size: 12px; margin: 4px 0" i18n="i18n.Contact">联系电话 / 0756-3316695</span>
          <span style="font-size: 12px; margin: 4px 0" i18n="i18n.email">公司邮箱 / support@qbaor.com</span>
          <span style="font-size: 0.65rem" i18n="i18n.Address">地址 / 珠海市高新区唐家湾镇哈工大路2号龙园智慧6栋2楼204</span>
        </div>
      </div>
      <div class="page6-2" id="page6">
        <div id="mapBox" class="p62-wrap">
          <img class="map" src="source/image/default.png" data-src="source/image/f_map.png" />
          <div class="p6-n1 p6-name" i18n="i18n.M1">新经济资源开发港</div>
          <div class="p6-n2 p6-name" i18n="i18n.M2">魅族科技大楼</div>
          <div class="p6-n3 p6-name" i18n="i18n.M3">龙园智慧园</div>
          <!--<div class="p6-n4 p6-name" i18n="i18n.M4">珠海市高新分局</div>-->
          <div class="p6-n5 p6-name">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="p6-n7 p6-name" i18n="i18n.M5">港湾大道</div>
          <div class="p6-n8 p6-name" i18n="i18n.M6">哈工大路</div>
        </div>
      </div>

      <div class="page6-2">
        <div class="p62-wrap">
          <div class="p6-n6" onclick="toIndex()">
            <img src="source/image/default.png" data-src="source/image/f_top.png" />
            <span i18n="i18n.Homepage">回到首页</span>
          </div>
        </div>
      </div>
      <div class="number" style="border-bottom: none; bottom: 1%">
        <div class="inner clearfix">
          <img src="source/image/default.png" data-src="source/image/a_logo.png" />
        </div>
        <div style="margin: 12px auto 0; text-align: center; display: flex">
          <a>Copyright © 2021 圈宝网络科技有限公司 版权所有　</a>
          <a href="https://beian.miit.gov.cn">粤ICP备17136742号-1</a>
          <img src="source/image/default.png" data-src="source/image/f_gov.png"
            style="float: left; margin-left: 10px; margin-right: 4px" />
          <a target="_blank" href="https://beian.miit.gov.cn" style="
                display: inline-block;
                text-decoration: none;
                height: 20px;
                line-height: 20px;
                color: #fff;
              ">
            粤公网安备 44049102496336号  </a>
        </div>
      </div>
    </div>
  </div>

  <div id="crea">
    <img class="c1_img" src="source/image/ma_aim.png" />
    <div class="c1_tips">电脑端请用浏览器打开</div>
  </div>

  <script src="source/js/jquery.min.js"></script>
  <!--动态加载css-->
  <script>
    function addCss() {
      //Promise和async/await语法糖 ->链异步函数
      let func = async () => {
        const time = [0];

        let children = document.getElementsByTagName("head")[0].children;
        let lastIndex = children.length - 2;
        let node = children[lastIndex];
        $("#app").css('background', '#1C1E27');
        let href = node.getAttribute("href") + "?v=" + Math.random();
        await sleep(time[0]);
        node.setAttribute("href", href);
        return '执行完成'
      };
      func().then(console.log)
    }

    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    }

    addCss();
  </script>
  <script>
    function isWechat() {
      var rst = true;
      if (
        window.navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        var ua = navigator.userAgent.toLowerCase();
        if (!(ua.match(/MicroMessenger/i) == "micromessenger")) {
          rst = false;
        }
      } else {
        rst = false;
      }
      return rst;
    }

    function checkOS() {
      if (isWechat()) {
        if (
          navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          )
        ) {
          window.location.href = "mobile.html";
          console.log("手机微信端");
        } else {
          console.log("PC微信端");
        }
      } else {
        if (
          navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          )
        ) {
          window.location.href = "mobile.html";
          console.log("手机端");
        } else {
          console.log("PC端");
          $("#crea").hide();
        }
      }
    }

    checkOS();
    window.onresize = function () {
      checkOS();
    };
  </script>
  <script src="source/js/jquery.fullPage.min.js"></script>
  <script src="source/js/index_slick.js"></script>
  <script src="source/js/index.js"></script>
  <script src="source/js/jquery.i18n.js"></script>
  <script type="text/javascript">
    addOpacity(-1);
    //兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所有我也没有必要修改了
    //判断鼠标滚轮滚动方向
    // if (window.addEventListener)
    //   //FF,火狐浏览器会识别该方法
    //   window.addEventListener("DOMMouseScroll", wheel, false);
    // window.onmousewheel = wheel; //W3C

    let productValue = 1;
    let languages = "1";
    let scrollIndex = 3; //#p5的滚动盒子，初始坐标为3
    window.onload = function () {
      setWheelObserver();
      setTimeout(() => {
        $("#header").css("border-bottom", "1px solid transparent");
        setProduct(1); //初始化选中产品
        setNavListener(); //给左侧导航按钮添加点击监听
        setCreditChange(); //证书选择
        // setNavHover();
        initLanguage();

        $("#index_main").css("filter", "blur(0) brightness(1)");
        setSelScroll(3);

        initAnimation();

        setTimeout(() => {
          initCss();
          setAnimation(wheelFromIndexJS.index);
        }, 1000);

        addMouseMoveListener();
        painSky();
        selectPage(0)
      }, 0)
    };

    function setWheelObserver() {
      Object.defineProperty(wheelFromIndexJS, 'index', {
        get: function () {
          return tempFromIndexJS;
        },
        set: function (v) {
          tempFromIndexJS = v;

          if (
            !(tempFromIndexJS == 1 && this.direction == -1) &&
            !(tempFromIndexJS == 7 && this.direction == 1)
          )
            handle(this.direction);
        }
      });

    }

    function toSolution(index) {
      localStorage.pageIndex = index + 1
      window.open('/solution.html')
    }

    // page-4 AI解决方案选择页码
    function selectPage(index) {
      if (index == 0) {
        $(`.p41`).css('display', 'block')
        $(`.p42`).css('display', 'none')
        $(`.p4-index:nth-child(1)`).css("background", "#21A796")
        $(`.p4-index:nth-child(1)`).css("color", "#fff")
        $(`.p4-index:nth-child(2)`).css("background", "#fff")
        $(`.p4-index:nth-child(2)`).css("color", "#21A796")
      } else {
        $(`.p41`).css('display', 'none')
        $(`.p42`).css('display', 'block')
        $(`.p4-index:nth-child(2)`).css("background", "#21A796")
        $(`.p4-index:nth-child(2)`).css("color", "#fff")
        $(`.p4-index:nth-child(1)`).css("background", "#fff")
        $(`.p4-index:nth-child(1)`).css("color", "#21A796")
      }
    }

    //案例图数组
    const anliNum = [2, 3, 1, 2, 3, 3, 2];
    const anliImg = [
      ["ANLI-MRA.png", "anli_mra_1.png"],
      ["ANLI-HBD.png", "anli_zsh_2.png", "anli_zsh_3.png"],
      [],
      ["ANLI-PTT.png", "anli_ptt_2.png"],
      ["ANLI-AICS.png", "anli_school_2.png", "anli_school_3.png"],
      ["ANLI-AR.png", "anli_hb_2.png", "anli_hb_3.png"],
      ["ANLI-XunBao.png", "anli_jdb_2.png"],
    ];
    let anliIndex = [0, 0, 0, 0, 0, 0, 0];

    //案例图的切换 0为上一页，1位下一页，-1为切换案例时调用
    function setSwitch(isNext) {
      if (scrollIndex == 2) {
        $("#switch img:nth-child(1)").removeClass("switchHigh");
        $("#switch img:nth-child(2)").removeClass("switchHigh");
        return;
      }
      const s = scrollIndex;
      const src = "source/image/";
      const len = anliNum[s] - 1; //当前案例图组长度，达到该长度则不能切换下一个且修改样式
      if (isNext == 1) {
        //下一页
        if (anliIndex[s] == len) return;
        anliIndex[s]++;
        if (anliIndex[s] == len) {
          //下一页到极限值
          $("#switch img:nth-child(2)").removeClass("switchHigh");
          $("#switch img:nth-child(1)").addClass("switchHigh");
        } else {
          //未到极限值
          $("#switch img:nth-child(1)").addClass("switchHigh");
          $("#switch img:nth-child(2)").addClass("switchHigh");
        }
      } else if (isNext == 0) {
        //上一页
        if (anliIndex[s] == 0) return;
        anliIndex[s]--;
        if (anliIndex[s] == 0) {
          //上一页到极限值
          $("#switch img:nth-child(1)").removeClass("switchHigh");
          $("#switch img:nth-child(2)").addClass("switchHigh");
        } else {
          //未到极限值
          $("#switch img:nth-child(2)").addClass("switchHigh");
          $("#switch img:nth-child(1)").addClass("switchHigh");
        }
      } else {
        if (anliIndex[s] == 0) {
          $("#switch img:nth-child(1)").removeClass("switchHigh");
          $("#switch img:nth-child(2)").addClass("switchHigh");
        } else if (anliIndex[s] == len) {
          $("#switch img:nth-child(2)").removeClass("switchHigh");
          $("#switch img:nth-child(1)").addClass("switchHigh");
        } else {
          $("#switch img:nth-child(1)").addClass("switchHigh");
          $("#switch img:nth-child(2)").addClass("switchHigh");
        }
      }
      $("#imgBox >img:nth-child(" + (s + 1) + ")").attr(
        "src",
        src + anliImg[s][anliIndex[s]]
      );
    }

    function painSky() {
      let sky = document.querySelector(".sky");

      function createDiv(size) {
        let circle = document.createElement("div");
        circle.classList.add("circle");

        let randRange5 = Math.floor(Math.random() * 5) + 1;
        circle.classList.add(`blink_${randRange5}`);

        let widthAndHeight = random(size, "px");
        circle.style.height = circle.style.width = widthAndHeight;

        circle.style.left = random(window.innerWidth, "px");
        circle.style.top = random(window.innerHeight, "px");
        // circle.style.backgroundColor = randomColor();

        sky.appendChild(circle);
      }

      function paintStars(stars, size) {
        while (sky.firstChild) {
          sky.removeChild(sky.firstChild);
        }
        for (let i = 0; i < stars; i++) {
          createDiv(size);
        }
      }

      function random(range, unit) {
        let randNum = Math.floor(Math.random() * range) + 1;
        return `${randNum}${unit}`;
      }

      paintStars(358, 2);
    }

    function addMouseMoveListener() {
      let isHover = false;
      $("#myLine").hover(
        (e) => (isHover = true),
        (e) => (isHover = false)
      );
      $(document).mousemove(function (e) {
        let centerX = document.body.clientWidth / 2;
        let centerY = document.body.clientHeight / 2;
        let x = (-6 * e.pageX) / centerX + 8.1 + "%";
        let y = (-6 * e.pageY) / centerY + 6 + "%";

        if (wheelFromIndexJS.index == 1) {
          $("#myLine").css("transition", "none");
          //Hover在myLine上时不进行移动
          if (isHover) {
            $("#myLine").css("transition", "all linear .25s");
            $("#myLine").css("transform", "translate(0,0)");
            return;
          }
          $("#myLine").css("transform", "translate(" + x + "," + y + ")");
        } else if (wheelFromIndexJS.index == 3) {
          $("#move3-1").css("transform", "translate(" + x + "," + y + ")");
        }
      });
      $(document).mouseleave(function (e) {
        $("#myLine").css("transition", "all linear .25s");
        $("#myLine").css("transform", "none");
      });
    }

    //文章数组
    let artArray = [
      //文章1
      `<div>让5G走进校园，助力AI智慧校园</div>
         <img src="source/art/art1.gif">
         <span>5G和AI就像万物互联的智能社会的孪生引擎，5G带来无限连接，AI带来无限智慧，‘物联网+AI’带来无限可能。</span>
         <span>积极构建“5G+AI”智慧校园已经成为教育行业发展的重要方向。</span>
         <div>AI智慧校园</div>
         <img src="source/art/art2.jpg">
         <span>AI智慧校园在识别行为分析、动作分析、校园安全等方面实现即时抓拍、深度分析、同步预警，让校园更智慧、安全。</span>
         <div>人脸识别，精准识别身份</div>
         <img src="source/art/art3.jpg">
         <span>通过人脸、人形算法进行识别，无需学生排队和主动配合，便能快速识别身份，非法闯入预警。</span>
         <span>而已经办理报到的同学则可通过“刷脸”出入宿舍、图书馆、超市、餐厅支付等，一气呵成。</span>
         <div>AI深度情绪识别分析</div>
         <img src="source/art/art4.jpg">
         <span>通过人脸侦测、跟踪、抓拍、活体检测、属性分析等人脸识别技术，对学生的各种情绪识别分析，反馈课堂活跃度和效果，从而显著改善教学体验。</span>
         <div>AI深度行为识别分析</div>
         <img src="source/art/art5.jpg">
         <div>AI行为识别监控，安全守护</div>
         <img src="source/art/art6.jpg">
         <span>AI识别技术监控是人体骨骼模型、光流提取、三维卷积神经网络等算法，自动识别场景下的异常行为，变被动为主动，提前预警，主动防御。</span>
         <div>融合</div>
         <img src="source/art/art7.jpg">
         <span>A通过灵活的技术架构和支撑框架，支持上层业务模块的灵活调整和多种终端访问。</span>`,
      //文章2
      `<div>QB-PTT智能语音对讲！手机也是对讲机！</div>
         <label>什么是QB-PTT 智能语音对讲</label>
         <span>QB-PTT智能语音对讲机是是一个多人互相实时沟通的系统，在这系统上，可以用我们开发的手机APP代替传统对讲机进行交流 。</span>
         <span>PTT通过互联网发送用户的聊天内容，使用互联网流量，没有通讯费，将手机变成免费的对讲机的移动应用软件与手机的结合。</span>
         <img src="source/art/2-1.jpg">
         <label>基本功能包括哪些</label>
         <div>实时对讲</div>
         <span>用户可实时进行语音对讲。消息发送成功后，同频道的其他在线账户均可实时收听到该语音信息。</span>
         <img src="source/art/2-2.jpg">
         <div>群组管理</div>
         <span>拥有管理权限的用户，可以对频道的人员进行调整，随时增加和剔除用户</span>
         <img src="source/art/2-3.jpg">
         <div>历史消息随时查看</div>
         <span>可以通过历史记录查看所处频道内发送出来的语音信息，最多记录条数不限制！</span>
         <img src="source/art/2-4.jpg">
         <div>后台管理</div>
         <span>通过后台管理，与已有工作系统结成一体，打造完整的企业信息一体化管理平台，轻松提高管理效率</span>
         <img src="source/art/2-5.jpg">
         <label>优势与特点</label>
         <div>实用性</div>
         <span>一机多用。在手机上安装手机对讲软件，集手机和对讲机为一体~手机就是对讲机，再也不需要背着很重的设备了！</span>
         <img src="source/art/2-6.jpg">
         <div>可靠性</div>
         <span>以强大而稳定的移动通信网络为支撑，可以跟互联网等网络互联互通，对讲范围无限制，有网络就可以对讲！</span>
         <img src="source/art/2-7.jpg">
         <div>安全性</div>
         <span>语音是经过加密的数字语音，比起传统对讲机来讲更加安全，通话信息更安全，同时对讲机系统可以支持企业私有云部署方式，企业可以完全独立享有全部的数据，外界无法获取到</span>
         <img src="source/art/2-8.jpg">
         <div>经济性</div>
         <span>手机终端有众多的选择，不需采购专门的终端，无须建立专用的集群通信网络，只按数据流量计费，不收取手机通话费用，节约大量成本</span>
         <img src="source/art/2-9.jpg">
         <div>可扩展性</div>
         <span>充分考虑5G与未来技术更新和网络升级，根据业务需求再进行技术升级，从而使得集群通系统支持更多的数据业务，如视频对讲，发送文字图片等功能</span>
         <img src="source/art/2-10.jpg">
         <div>永久在线、耳机对讲</div>
         <span>用户在使用PTT终端软件时，如不主动注销或退出系统，该软件将保持永久在线。即使黑屏后也可以实时接收消息，同时支持各类耳机，用户不需要拿着手机也可以听到声音，并通过耳机发送语音消息（排除网络原因、手机卡欠费或关机等非正常状态）</span>
         <img src="source/art/2-11.jpg">`,
      //文章3
      `<div>企业新闻 |谷歌眼镜技术团队莅临圈宝科技交流沟通</div>
         <label>2019年8月22日下午，Google Glass EE 团队CTO Antonio 及未来宝投资控股有限公司负责人陈总一行莅临珠海圈宝网络科技有限公司沟通交流，并深入体验了公司产品。圈宝科技的董事长及技术负责人热情接待来宾，并陪同参观公司。</label>
         <img src="source/art/3-1.jpg">
         <span>此次Antonio及陈总一行参观圈宝科技，旨在深入探讨AR技术未来发展的情况及Google Glass EE在中国市场的创新突破与部署发展。同时，在蔡董的陪同下，由技术负责人向Antonio及陈总一行展示了公司制作的AR产品，并深入体验了公司制作的VR红色展厅项目。</span>
         <img src="source/art/3-2.jpg">
         <span>Google Glass技术团队在体验了公司制作的AR、VR产品后，对公司的产品与技术表现出了浓厚的兴趣并留下了深刻的印象，同时对于其在Google Glass上应用提出了建议并进行了深入的探讨，未来将会在AR VR技术在Google Glass上应用寻求战略合作的契机。</span>
         <img src="source/art/3-3.jpg">
         <span>Google Glass EE这款眼镜的使命就是要在你工作时解放双手，在你需要帮助时及时提醒。实际上，在过去的两年里， Google Glass EE已不知不觉渗透到各行各业当中，成为不少人的工作伙伴。</span>
         <img src="source/art/3-4.jpg">
         <span>圈宝网络科技则是以AR技术为强项立身的团队，所推出的空中红包雨、圈宝-PTT智能语音对讲系统等，一经推出便获得良好的市场反馈。蔡董事长表示将会致力于AR技术的开发与创新，以自身强项为产品赋予更多新颖有趣的玩法。</span>
         <span>同时，通过与Google Glass技术团队的合作与交流，让公司技术力量更加强大，让世界充满惊喜！</span>`,
      //文章4
      `<div>5G+AR，在印刷领域大显身手</div>
        <img src="source/art/4-1.gif">
        <span>2019年6月6日，工业和信息化部发放了5G商用牌照，标志着我国正式步入了5G商用元年，而在5G时代，AR处于风口，正在大爆发时期。AR+教育，AR医疗，AR区块链……，各种新名词层出不穷。在印刷领域，AR作为一种新型的信息展现技术，又是如何“大显身手”呢？</span>
        <img src="source/art/4-2.gif">
        <span>AR技术延伸出多样化、立体化内容和形式，给予受众全新的综合体验</span>
        <label>做AR印刷，我们来真的</label>
        <span>AR在印刷行业虽属新事物，应用前景却十分光明。商业印刷、出版印刷、包装印刷中都能融入AR的身影，简单的印刷物蜕变为多元信息集成体，连接线上信息与线下产品，增强引流作用</span>
        <img src="source/art/4-3.jpg">
        <span>2017年，农夫山泉与网易云音乐展开跨界合作，瓶身用网易云音乐的黑胶唱片拼成农夫山泉的山水logo。这款设计利用了AR技术，当用户扫描黑胶唱片图案后，手机界面会变成星空，点击星球就会弹出随机乐评，还可跳转至相应的歌单。“超额完成”企业预期广告效果，也让印刷市场见识到AR魅力，开启“AR+印刷”探索与尝试。</span>
        <img src="source/art/4-4.gif">
        <img src="source/art/4-5.gif">
        <span>传统的科普书籍让儿童阅读起来不免枯燥乏味，而京东最近推出的AR书籍阅读方式非常简单有趣，只要用京东App扫一扫，书上的画面就会瞬间跃然纸上，书中的主人公还会“跳出来”生动讲解安全知识，帮助小朋友更直观地了解儿童自我保护。</span>
        <img src="source/art/4-6.jpg">
        <span>精品茶叶包装礼盒上运用AR</span>
        <span>扫描包装画面，呈现不同的推广内容：品茗场景音乐沁人心脾；茶园及茶叶精心炒制视频；品茶亦传承与弘扬中华文化。此包装获得美国印刷协会的班尼金奖。</span>
        <label>以客户为中心，提供个性化方案</label>
        <span>受互联网冲击，印刷市场急剧动荡，“抓住并解决痛点”是企业安身立命的根本所在。很多印刷企业想涉足AR领域，分得高新科技领域的“一杯羹”，‘跨界’会变成印刷行业的常态，AR帮助企业从传统制造商向新型服务商转型，更好地赋能制造商与客户。</span>
        <img src="source/art/4-7.jpg">
        <span>以前大部分印刷企业只负责印制环节，前期策划比较薄弱。圈宝网络帮助印刷企业运用AR做丰富多彩的“印刷物+AR”企划方案，“发力”营销环节，提升印刷品附加服务，增强客户黏性。</span>
        <img src="source/art/4-8.jpg">
        <span>对于印刷业来说，AR将是一个不能错过的机会。目前，一些印刷行业企业在AR/VR、人工智能、物联网领域都有布局，5G时代来临，站在风口的AR创新的行业发展，将会大大提高行业的竞争力</span>
        <img src="source/art/4-9.jpg">
        <span>未来我们会进一步挖掘AR技术，为印刷企业发展不断赋能，我们对未来印刷发展充满信心。</span>
        <img style="width: 60%" src="source/art/4-10.jpg">
        <img src="source/art/4-11.jpg">
        <span>扫码识别上方小程序，进入AR体验，扫一扫上方小培菲康LOGO，体验AR+印刷 AR说明书</span>`,
      //文章5
      `<div>AI人工智能，圈宝科技牵手万科物业打造智慧小区</div>
         <span>相信很多人，对科幻电影中的未来生活充满向往，梦想有一天，那些高科技，能走进我们的现实生活。</span>
         <span>如今，智能化的生活对于一个高品质小区来说，显得越来越重要。随着物联网、大数据、云计算、人工智能等新一代信息技术的加速发展，“智慧小区”的诞生使梦想变为现实，也让智能科技慢慢步入我们的日常生活。</span>
         <span>圈宝科技牵手万科物业共同打造智慧小区，让小区居民生活更加方便，升级创新社区管理模式，让物业服务更加周到，管理更加全面</span>
         <img src="source/art/5-1.jpg">
         <span >那么，到底什么是“智慧小区”？智慧小区到底有多智能呢？下面我们就一起来感受下什么是“智慧小区”。</span>
         <div>智慧门禁 人脸识别</div>
         <span >在小区门口安装“人脸识别”智能终端，业主进出小区再也不用手忙脚乱找门禁卡、找手机，即使抱着小孩、提着菜、拿着东西也丝毫不怕，完全解放双手，“刷一刷脸”就能轻松过门禁。</span>
         <img src="source/art/5-2.jpg">
         <span>访客到来前，业主只需在手机app内上传访客照片，小区门禁即可畅通无阻，不再像以前那样要业主、物业、保安间互相交流很久。</span>
         <img src="source/art/5-3.jpg">
         <span>对于一些标记的脸庞，如犯罪分子，将会与公安系统对接，让犯罪分子无处可逃；黑名单成员在这个系统中也能智能识别，禁止进入，并上报公安</span>
         <img src="source/art/5-4.jpg">
         <div>智能监控  安全保障</div>
         <img src="source/art/5-5.jpg">
         <span>图为圈宝网络技术总监与总负责人在万科物业负责小区内调试智能监控</span>
         <img src="source/art/5-6.jpg">
         <span>通过人形识别、行为识别、移动监测等多种识别技术，利用人工智能在画面中区分人类与非人类（如模型人、动物、非生物），判断入侵、翻墙、偷窃等危险或异常的情况，及时通知安保人员。</span>
         <img src="source/art/5-7.jpg">
         <span>同时，还可以通过智能监控识别高空抛物，监控视角可覆盖建筑整个立体面，一旦有高空物体落下，系统将捕捉定位抛物位置及分析物体降落轨迹，并进行轨迹分析，高空抛物管理系统实时预警，可快速锁定楼层和相关抛物责任人，并将预警图像进行保存，用切实的行动为业主的生命财产安全保驾护航。</span>
         <img src="source/art/5-8.jpg">
         <div>智慧消防 实时预警</div>
         <span>通过识别烟、火，实时监测、实时预警的智慧消防系统，为小区内住户的人身财产安全提供了切实有力的保障。</span>
         <img src="source/art/5-9.jpg">
         <div>智慧对讲 及时高效</div>
         <img src="source/art/5-10.jpg">
         <span>物业与保安团队同时使用QB-PTT即时对讲APP,时刻了解小区事件的处理情况。为小区管理大大降低了人力消耗与成本，实现真正的无人值守，有人巡护的新一代Al+社区。</span>
         <div>智能停车  科学安全</div>
         <span>如今，在这个几乎家家有车的年代，小区的车辆管理和安全就显得尤为重要。</span>
         <img src="source/art/5-11.jpg">
         <span>智能停车，不仅包括车牌识别，还可通过人形识别车库内车辆攀爬，偷盗扒窃，儿童逗留等行为，停车场所有的异常情况、违规停放等事件发生，系统都会通知电脑与手机，不但可以方便管理人员，而且还能将停车场相关的报表导出，让物业管理一目了然，方便维护车库。</span>
         <img src="source/art/5-12.jpg">
         <div>智能照明 节能减排</div>
         <span>对小区停车场、通道、公共区域的灯光智能控制调节亮度，有人有车提前亮灯，无人车停分布式安防底亮，让小区灯光节能50%以上。</span>
         <img src="source/art/5-13.jpg">
         <div>智能生活  就在身边</div>
         <span>业主通过手机app，就可以一键远程缴纳物业、水、电、停车费，了解物业服务公告信息、与其他住户共同探讨社区活动、获知天气情况、控制门禁系统等。还可以通过APP里的购物到家服务，足不出户就购买很多物美价廉的农产品，同时通过手机APP还可以在娱乐的过程中完成垃圾分类的学习。</span>
         <img src="source/art/5-14.jpg">
         <span>目前，圈宝科技的智慧小区建设方案已经在万科物业某示范小区落地，将小区安全放在首位，让小区业主住的安心放心。升级创新小区管理模式，改变落后的物业管理模式，让物业人员工作更加高效，服务更加周到，管理更加全面。智慧小区，助力智慧城市建设，让城市生活更加美好！</span>`,
      //文章6
      `<div>热烈祝贺我司珠港澳人工智能算法大赛荣获优秀奖</div>
        <span>2020年12月15日，首届珠港澳人工智能算法大赛在珠海圆满结束，现场举办了颁奖仪式。在此次比赛中，一共有两组AI竞赛题目，分别是使用人工智能算法实现短衣短裤识别和小摊贩占道识别。由我司AI团队Peizy在全球1300多个人工智能团队中脱颖而出，分别在两个赛道都取得了第四名的优异成绩。</span>
        <img src="source/art/6-1.png">
        <span class='img-name'>短袖短裤识别获奖名单</span>
        <img src="source/art/6-2.png">
        <span class='img-name'>小摊贩占道识别获奖名单</span>
        <span>据了解，首届珠港澳人工智能算法大赛由珠海市香洲区科技创新促进中心主办，腾讯云启创新中心（珠海）和深圳极视角科技有限公司联合承办，并由暨南大学智能科学与工程学院/人工智能产业学院提供学术支持。旨在加强国内外人工智能领域优秀青年人才间的交流合作，加速人工智能高端人才集聚，推动珠海市及香洲区人工智能产业发展，为产业变革提供创新动力。</span>
        <img src="source/art/6-3.png">
        <span>参加本次比赛的团队包括有腾讯公司人工智能团队、中国半导体人工智能团队、香港理工大学博士生团队、澳门科技大学人工智能团队、华南理工大学人工智能团队、华中科技大学人工智能团队等国际国内顶尖人工智能团队。我司人工智能团队在公司的大力支持下，在赛程中不断优化人工智能算法，精益求精，最终在多支参赛队伍中脱颖而出，取得优异成绩。充分体现了圈宝人工智能团队的团结协助精神和扎实的人工智能技术能力。</span>`,
      //文章7
      `<div>喜讯丨热烈祝贺圈宝科技成为高新技术企业</div>
        <span>根据《高新技术企业认定管理办法》（国科发火〔2016〕32号）和《高新技术企业认定管理工作指引》（国科发火〔2016〕195号）有关规定，全国高新技术企业认定管理工作领导小组办公室下发了《关于对广东省2021年认定的第二批高新技术企业进行备案公示的通知》，我司顺利通过了高新技术企业认定，由此正式迈入国家高新技术企业行列。</span>
        <img src="source/art/7-1.png">
        <img src="source/art/7-2.png">
        <span>高新技术企业认定是在国家重点支持的高新技术领域内，对持续进行研究开发与技术成果转化，形成企业核心自主知识产权，并以此为基础开展生产经营活动的企业认可，旨在培育创造新技术、新业态，促进经济升级发展。可见国家高新技术企业的称号的获得，是对一个企业是否拥有核心自主知识产权最有力的证明。</span>
        <span>我司自成立以来，一直致力于人工智能技术改造传统行业。今后，我司将继续加大研发投入，加强公司研发成果转化能力，充实创新发展后劲，提升企业核心竞争力。为公司实现“让世界充满惊喜”的愿景输入源源不竭的发展动力。</span>`,
    ];

    function selArticle(index) {
      $("#article").html(artArray[index]);
      $("#article").removeClass();
      $("#article").addClass("p5-center pb-art" + (index + 1));
      $("#pop").css("display", "flex");
      $(".pb-wrap")[0].scrollTo(0, 0);
    }

    function initAnimation() {
      //解决方案右边部分的动画
      $(".p4r-item:nth-child(2) img").addClass(
        "fadeInUp animated animated-delay1"
      );
      $(".p4r-item:nth-child(3) img").addClass(
        "fadeInUp animated animated-delay2"
      );
      $(".p4r-item:nth-child(4) img").addClass(
        "fadeInUp animated animated-delay3"
      );
      $(".p4r-item span").addClass("fadeIn animated");
      $(".p4r-item div").addClass("fadeIn animated");
    }

    function setSelScroll(s) {
      let len = 7;
      let index = Array.from({
        length: len,
      },
        (v, i) => i - s
      );

      $(".imgP5b").css("filter", "brightness(.5)")
      $("#imgP5" + s).css("filter", "brightness(1)")
      // for (let i = 0; i < len; i++) {
      //   let dom = "#imgP5" + i;
      //   let currentIndex = index[i];
      //   if (currentIndex > -4 && currentIndex < 0) {
      //     currentIndex = Math.abs(currentIndex);
      //     let transform = [
      //       "",
      //       "translate(-115%, 0)",
      //       "translate(-230%, 0) ",
      //       "translate(-345%, 0) ",
      //     ][currentIndex];
      //     let filter = [
      //       "brightness(1)",
      //       "brightness(.5)",
      //       "brightness(.5)",
      //       "brightness(.5)",
      //     ][currentIndex];
      //     $(dom).css("transform", transform);
      //     $(dom).css("filter", filter);
      //     $(dom).removeClass("imgHide");
      //   } else if (currentIndex < 4) {
      //     let transform = [
      //       "translate(0, 0)",
      //       "translate(115%, 0) ",
      //       "translate(230%, 0)",
      //       "translate(345%, 0)",
      //     ][currentIndex];
      //     let filter = [
      //       "brightness(1)",
      //       "brightness(.5)",
      //       "brightness(.5)",
      //       "brightness(.5)",
      //     ][currentIndex];
      //     $(dom).css("transform", transform);
      //     $(dom).css("filter", filter);
      //     $(dom).removeClass("imgHide");
      //   } else {
      //     $(dom).addClass("imgHide");
      //   }
      // }

      setSelShow(s);
      setSelContent(s);
    }

    function setSelShow(s) {
      let old = "#imgBox >img:nth-child(" + (scrollIndex + 1) + ")";
      let dom = "#imgBox >img:nth-child(" + (s + 1) + ")";
      $(old).css("opacity", 0);
      $(old).css("transform", "translateX(-8%)");
      $(dom).css("opacity", 1);
      $(dom).css("transform", "translateX(0)");

      scrollIndex = s;
      setSwitch(-1); //给案例图index赋值
    }

    function setSelContent(s) {
      $("#p5Wrap").removeClass("fadeInRight animated");
      let co =
        '<div style="display: flex;justify-content: flex-start;align-items: center">' +
        '<img src="source/image/good.png">' +
        " <span style='margin-left:6px;color: #999' i18n=\"i18n.Co\">合作单位</span></div>";
      let other =
        '<div class="p5-target">' +
        '            <div style="display: flex;flex-direction: column;justify-content: space-between">';
      let other2 =
        "                            </div>" +
        '<img style="width: 1.6rem;cursor: pointer;opacity:0" src="source/image/play.png">' +
        " </div>";
      if (s == 0) {
        $("#p5Wrap").html(
          '<span class="spanP51" i18n="i18n.A1">标题</span>' +
          '<span class="spanP52" i18n="i18n.A1-1">介绍</span>' +
          other +
          co +
          "<div style=\"margin-top:4px\" i18n='i18n.com1'>Wynn Macau</div>" +
          other2
        );
      } else if (s == 1) {
        $("#p5Wrap").html(
          '<span class="spanP51" i18n="i18n.A2">标题</span>' +
          '<span class="spanP52" i18n="i18n.A2-1">介绍</span>' +
          other +
          co +
          "<div style=\"margin-top:4px\" i18n='i18n.com2'>中国石油化工股份有限公司</div>" +
          other2
        );
      } else if (s == 2) {
        $("#p5Wrap").html(
          '<span class="spanP51" i18n="i18n.A3">标题</span>' +
          '<span class="spanP52" i18n="i18n.A3-1">介绍</span>' +
          other +
          co +
          "<div style=\"margin-top:4px\" i18n='i18n.com1'>Wynn Macau</div>" +
          other2
        );
      } else if (s == 3) {
        $("#p5Wrap").html(
          '<span class="spanP51" i18n="i18n.A4">标题</span>' +
          '<span class="spanP52" i18n="i18n.A4-1">介绍</span>' +
          other +
          co +
          "<div style=\"margin-top:4px\" i18n='i18n.com1'>Wynn Macau</div>" +
          other2
        );
      } else if (s == 4) {
        $("#p5Wrap").html(
          '<span class="spanP51" i18n="i18n.A5">标题</span>' +
          '<span class="spanP52" i18n="i18n.A5-1">介绍</span>' +
          other +
          '<div style="margin-top:4px"></div>' +
          other2
        );
      } else if (s == 5) {
        $("#p5Wrap").html(
          '<span class="spanP51" i18n="i18n.A6">标题</span>' +
          '<span class="spanP52" i18n="i18n.A6-1">介绍</span>' +
          other +
          co +
          "<div style=\"margin-top:4px\" i18n='i18n.com3'>中国平安保险(珠海)公司</div>" +
          other2
        );
      } else if (s == 6) {
        $("#p5Wrap").html(
          '<span class="spanP51" i18n="i18n.A7">标题</span>' +
          '<span class="spanP52" i18n="i18n.A7-1">介绍</span>' +
          other +
          co +
          "<div style=\"margin-top:4px\" i18n='i18n.com4'>加多宝（中国）饮料有限公司</div>" +
          other2
        );
      }

      (async () => {
        await sleep(50);
        $("#p5Wrap").addClass("fadeInRight animated");
        return "切换内容完成";
      })().then(console.log);

      let language = ["en", "cn"][languages];
      languageSelect(language);
    }

    function setCreditChange() {
      $("input:radio[name='credit']").change(function () {
        var value = $("input[name='credit']:checked").val();
        $("#imgCredit").attr("src", "source/image/" + value + ".png");

        (async () => {
          $("#imgCredit").removeClass("fadeInRight animated");
          await sleep(50);
          $("#imgCredit").addClass("fadeInRight animated");
          return "切换证书完成";
        })();
      });
    }

    // 当前页执行完动画opacity置为1，非本页置为0(方便下次执行动画)
    // 第6页的opacity为多步动画，因此需特殊处理
    function addOpacity(index) {
      let all = [
        ["#ani1-1", "#ani1-2", "#ani1-3"],
        ["#ani2-1", "#ani2-2", "#ani2-3"],
        ["#ani4-1"],
        ["#iback"],
        [],
        [".ani6-1", ".ani6-2", ".ani6-3", ".ani6-4"],
      ];
      console.log('我被执行了')
      for (let i = 0; i < all.length; i++) {
        for (let j = 0; j < all[i].length; j++) {
          // 当前页均将opacity置为1，其他页面置为0
          if (i == index - 1) {
            //对第6页的opacity进行特殊处理
            if (i == 5) {
              let time = [300, 600, 900, 1200][j];
              setTimeout(() => {
                console.log(time)
                $(all[i][j]).css("opacity", "1");
              }, time);
            } else {
              setTimeout(() => {
                $(all[i][j]).css("opacity", "1");
              }, 300);
            }
          } else {
            // 非本页置为0
            $(all[i][j]).css("transition", " all linear 1s");
            $(all[i][j]).css("opacity", "0");
          }
        }
      }
    }

    function setAnimation(index) {
      $("#mapBox").removeClass("scaleBig");
      addOpacity(index);
      setTimeout(() => {
        if (index == 1) {
          $("#ani1-1").addClass("fadeInDown animated");
          $("#ani1-2").addClass("fadeInLeft animated");
          $("#ani1-3").addClass("fadeInUp animated");
          setTimeout(() => {
            $("#ani1-1").removeClass("fadeInDown animated");
            $("#ani1-2").removeClass("fadeInLeft animated");
            $("#ani1-3").removeClass("fadeInUp animated");
          }, 1000);
        } else if (index == 2) {
          $("#ani2-1").addClass("fadeIn animated");
          $("#ani2-2").addClass("fadeInLeft animated");
          $("#ani2-3").addClass("fadeInUp animated");
          setTimeout(() => {
            $("#ani2-1").removeClass("fadeIn animated");
            $("#ani2-2").removeClass("fadeInLeft animated");
            $("#ani2-3").removeClass("fadeInUp animated");
          }, 1000);
        } else if (index == 3) {
          $("#ani4-1").addClass("fadeInLeft animated");
          setTimeout(() => {
            $("#ani4-1").removeClass("fadeInLeft animated");
          }, 1000);
        } else if (index == 4) {
          $("#iback").addClass("fadeInLeft animated");
          setTimeout(() => {
            $("#iback").removeClass("fadeInLeft animated");
          }, 1000);
        } else if (index == 5) {
          $("#s5-Aimg").css(
            "background-image",
            "url(https://quanbao-public.oss-cn-shenzhen.aliyuncs.com/GuanWang/pc/bg_case.png)"
          );
        } else if (index == 6) {
          console.log('执行动画')
          $(".ani6-1").addClass("fadeInUp animated");
          setTimeout(() => {
            $(".ani6-2").addClass("fadeInUp animated");
          }, 300);
          setTimeout(() => {
            $(".ani6-3").addClass("fadeInUp animated");
          }, 600);
          setTimeout(() => {
            $(".ani6-4").addClass("fadeInUp animated");
          }, 900);
          setTimeout(() => {
            $(".ani6-1").removeClass("fadeInUp animated");
          }, 1000);
          setTimeout(() => {
            $(".ani6-2").removeClass("fadeInUp animated");
          }, 1300);
          setTimeout(() => {
            $(".ani6-3").removeClass("fadeInUp animated");
          }, 1600);
          setTimeout(() => {
            $(".ani6-4").removeClass("fadeInUp animated");
          }, 1900);
        } else if (index == 7) {
          $("#mapBox").addClass("scaleBig");
        }
      }, 300);
    }

    // 切换语言
    function switchLanguage() {
      languages = sessionStorage.getItem("languages") == "0" ? "1" : "0";
      $("#lang >span").html(["English", "中文"][languages]);
      setLanguage();
    }

    // 语言初始化
    function initLanguage() {
      let index = sessionStorage.getItem("languages");
      languages = index ? index : "1";
      if (index == null) {
        $("#lang > span").html("中文");
        languageSelect("cn");
        sessionStorage.setItem("languages", "1");
      } else {
        let language = ["en", "cn"][index];
        $("#lang > span").html(["English", "中文"][index]);
        languageSelect(language);
      }
    }

    //切换语言函数
    function languageSelect(language) {
      document.getElementsByTagName("title")[0].innerText =
        language == "en" ?
          "Quanbao Network Home - Artificial Intelligence Recognition, Customized Enterprise Solutions (Latest Algorithm Technology)" :
          "珠海圈宝科技首页-人工智能识别团队,定制企业高效解决方案「最新算法技术」";
      $("[i18n]").i18n({
        defaultLang: language,
        filePath: "./source/i18n/",
        filePrefix: "i18n_",
        fileSuffix: "",
        forever: true,
        callback: function (res) { },
      });
    }

    // 点击切换语言
    function setLanguage() {
      sessionStorage.setItem("languages", languages);
      let language = ["en", "cn"][languages];
      console.log(language);
      languageSelect(language);
    }

    function setNavListener() {
      let dom = $("#fp-nav ul li");
      for (let i = 1; i <= dom.length; i++) {
        $("#fp-nav ul li:nth-child(" + i + ") a").click(function () {
          handle(i - wheelFromIndexJS.index);
        });
      }
    }

    function closePop() {
      $("#pop").css("display", "none");
    }

    function setProductNavCss(index) {
      let oldId = "#u" + productValue;
      $(oldId).removeAttr("checked");
      $(oldId + "+label span").css("color", "#808080");
      $(oldId + "+label span").css("transform", "scale(1)");
      $(oldId + "+label img").css("filter", "contrast(0)");
      productValue = index;
      if (productValue == 7) productValue = 1;
      let id = "#u" + productValue;
      $(id).attr("checked", "checked");
      $(id + "+label span").css("color", "#21A796");
      $(id + "+label span").css("transform", "scale(1.3)");
      $(id + "+label img").css("filter", "unset");
    }

    // 切换产品
    function setProduct(index) {
      let old = "#p4" + productValue;

      //nav样式
      setProductNavCss(index);

      //内容
      $(old).css("display", "none");
      if (productValue == 1) {
        $("#p41").css("display", "flex");
      } else if (productValue == 2) {
        $("#p42").css("display", "flex");
      } else if (productValue == 3) {
        $("#p43").css("display", "flex");
      } else if (productValue == 4) {
        $("#p44").css("display", "flex");
      } else if (productValue == 5) {
        $("#p45").css("display", "flex");
      } else if (productValue == 6) {
        $("#p46").css("display", "flex");
      }
      let language = ["en", "cn"][languages];
      languageSelect(language);
    }

    //点击播放video
    function playVideo() {
      let index = productValue;
      let src = "source/video/";
      let video =
        src + ["", "", "d_v2.mp4", "", "d_v5.mp4", "d_v6.mp4"][index];
      $("#video").css("display", "flex");
      if (index == 1) {
        if (languages == "1")
          $("#videoPlayer").attr("src", "source/video/d_v1.mp4");
        else $("#videoPlayer").attr("src", "source/video/d_v1e.mp4");
      } else {
        $("#videoPlayer").attr("src", video);
      }
      $("#videoPlayer").trigger("play");
    }

    //关闭video
    function closeVideo() {
      $("#videoPlayer").trigger("pause");
      $("#video").css("display", "none");
    }

    //Promise和async/await语法糖 ->链异步函数
    function sleep(ms) {
      return new Promise((resolve) => setTimeout(resolve, ms));
    }

    function initCss() {
      let line = $("#myLine");
      for (let i = 0; i < 18; i++) {
        line.append('<div class="point"></div>');
      }
      // setLineStyle(wheelFromIndexJS.index);
      setHeaderColor(wheelFromIndexJS.index);
      setLangColor(wheelFromIndexJS.index);
      setNavSelLine(wheelFromIndexJS.index);
    }

    function jump(i) {
      $("#fp-nav ul li:nth-child(" + i + ") a").trigger("click");
    }

    function toIndex() {
      $("#fp-nav ul li:nth-child(1) a").trigger("click");
    }


    //delta：变化的index
    //wheelFromIndexJS：切换页面结束重置为true，防止多次调用
    //wheelFromIndexJS.index：目标页
    function handle(delta) {
      $("#fp-nav").removeClass("line" + wheelFromIndexJS.index);
      $("#header").css("border-bottom", "none");
      $(".nav-item a").css("border-bottom", "none");
      setNavSelLine(wheelFromIndexJS.index);
      console.log('delta', delta)
      setTimeout(() => {
        setAnimation(wheelFromIndexJS.index);
      }, 300);
      setTimeout(() => {
        // setLineStyle(wheelFromIndexJS.index);
        setHeaderColor(wheelFromIndexJS.index);
        setLangColor(wheelFromIndexJS.index);
      }, 600);
    }

    function setNavSelLine(index) {
      if (index == 2) {
        $("#ani2-2").trigger('play')
      } else {
        $("#ani2-2").trigger('pause')
      }

      index = index == 5 ? 4 : index > 5 ? index - 1 : index;
      $(".nav-item:nth-child(" + index + ") a").css(
        "border-bottom",
        "1px solid rgb(33, 167, 150)"
      );
    }

    function setLangColor(index) {
      if (index == 2 || index == 3 || index == 6) {
        $("#lang").css("border", "1px solid #000");
        $("#lang").css("color", "#000");
        $("#lang>img").css("filter", "brightness(0)");
      } else {
        $("#lang").css("border", "1px solid #fff");
        $("#lang").css("color", "#fff");
        $("#lang>img").css("filter", "brightness(1)");
      }
    }

    function setHeaderColor(index) {
      let color = [
        "#fff",
        "#000",
        "#000",
        "#000",
        "#fff",
        "#000",
        "rgb(33, 167, 150)",
      ][index - 1];
      for (let i = 1; i <= $("#header li").length; i++) {
        $("#header li:nth-child(" + i + ") a").css("color", color);
      }
    }

    // 分隔线样式初始化
    function setLineStyle(index) {
      let border = [
        "#252525",
        "#e4e4e4",
        "transprant",
        "transprant",
        "transprant",
        "transprant",
        "#111317",
      ][index - 1];
      $("#header").css("border-bottom", "1px solid " + border);
      $("#fp-nav").removeClass("line" + (index + 1));
      $("#fp-nav").removeClass("line" + (index - 1));
      $("#fp-nav").addClass("line" + index);
    }

    function setPointStyle(index) {
      if (index == 2) {
        $("#fp-nav ul li a.active span").css("background", "red");
        $(".fp-slidesNav ul li a.active span").css("background", "red");
        $("#fp-nav ul li:hover a.active span").css("background", "red");
        $(".fp-slidesNav ul li:hover a.active span").css("background", "red");
      }
      console.log(index);
    }
  </script>
  <!-- <script type="text/javascript">
    _linkedin_partner_id = "919419";
    window._linkedin_data_partner_ids =
      window._linkedin_data_partner_ids || [];
    window._linkedin_data_partner_ids.push(_linkedin_partner_id);
  </script> -->
  <script type="text/javascript">
    (function () {
      var s = document.getElementsByTagName("script")[0];
      var b = document.createElement("script");
      b.type = "text/javascript";
      b.async = true;
      b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
      s.parentNode.insertBefore(b, s);
    })();
  </script>
  <!-- <noscript>
    <img height="1" width="1" style="display: none" alt=""
      src="https://px.ads.linkedin.com/collect/?pid=919419&fmt=gif" />
  </noscript> -->
</body>

</html>